<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		    #box{
			   text-align: center;	
			}
			#btn{
				margin: auto;
				width: 50px;
				height: 50px;
				line-height: 50px;
				background-color: #00FFFF;
				color: #fff;
				cursor:pointer;
			}
			 /*#box{
			 	text-align: center;
			 }
			 #btn{
			 	margin: auto;
			 	width: 60px;
			 	height: 60px;
			 	line-height: 60px;
			 	background-color: #0ff;
			 	color: #fff;
			 	cursor: pointer;
			 }*/
		</style>
	</head>
	<body>
		<div id="box">
			<!--<div id="btn">开</div>
			<img src="../../../../../p2_课件/day01/kejian/img/pic_bulbon.gif" />-->
			<div id="btn">开</div>
			<img id="img" src="../../../../../p2_课件/day01/kejian/img/pic_bulboff.gif" alt=""/>
		</div>			
		<script type="text/javascript">
			(function(){
				var btn = document.querySelector('#btn');
			    var img = document.querySelector('#img');
			    btn.onclick=function(){
				   if(this.innerHTML=='开'){
					   img.src="../../../../../p2_课件/day01/kejian/img/pic_bulbon.gif";
					   this.innerHTML="关";
					   this.style.backgroundColor="green"
				   }else{
					   img.src="../../../../../p2_课件/day01/kejian/img/pic_bulboff.gif";
					   this.innerHTML="开";
					   this.style.backgroundColor='#ddd';
				   }
			    }
			}())
			
			
//			(function(){
//				var btn=document.getElementById('btn');
//				var img=document.getElementById('img');
//				btn.onclick=function(){
//					if(this.innerHTML==开){
//						img.src="../../../../../p2_课件/day01/kejian/img/pic_bulbon.gif"
//						this.innerHTML="关";
//						this.style.backgroundColor="green"
//					}else{
//						img.src="../../../../../p2_课件/day01/kejian/img/pic_bulboff.gif"
//						this.innerHTML="开";
//						this.style.backgroundColor="#ddd"
//					}
//				}
//			}())
		</script>
	</body>
</html>
